{% extends 'base.html' %}

{% block title %}审核教练 - {{ coach.real_name }} - 乒乓球培训管理系统{% endblock %}

{% block page_title %}教练审核{% endblock %}

{% block extra_css %}
<style>
    .approval-container {
        max-width: 800px;
        margin: 0 auto;
        display: grid;
        gap: 2rem;
    }

    .coach-overview {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .coach-header {
        display: flex;
        align-items: center;
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 2px solid #f8f9fa;
    }

    .coach-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1.5rem;
        overflow: hidden;
        border: 3px solid #e9ecef;
    }

    .coach-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .coach-avatar i {
        font-size: 2rem;
        color: #6c757d;
    }

    .coach-basic {
        flex: 1;
    }

    .coach-name {
        font-size: 1.5rem;
        font-weight: 700;
        color: #2c3e50;
        margin: 0;
    }

    .coach-meta {
        color: #6c757d;
        margin-top: 0.5rem;
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .pending-badge {
        background: #fff3cd;
        color: #856404;
        padding: 0.5rem 1rem;
        border-radius: 25px;
        font-weight: 600;
        font-size: 0.875rem;
        margin-left: auto;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .info-section {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 1.5rem;
    }

    .section-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
    }

    .section-title i {
        margin-right: 0.5rem;
        color: #007bff;
    }

    .info-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .info-item:last-child {
        margin-bottom: 0;
    }

    .info-label {
        font-weight: 600;
        color: #495057;
        min-width: 80px;
        margin-right: 1rem;
    }

    .info-value {
        color: #6c757d;
        flex: 1;
        word-break: break-word;
    }

    .approval-form {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .form-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
    }

    .form-title i {
        margin-right: 0.75rem;
        color: #007bff;
    }

    .action-selector {
        margin-bottom: 2rem;
    }

    .action-options {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin-top: 0.5rem;
    }

    .action-option {
        position: relative;
        background: #f8f9fa;
        border: 2px solid #e9ecef;
        border-radius: 12px;
        padding: 1.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
    }

    .action-option:hover {
        border-color: #007bff;
        background: #f0f8ff;
    }

    .action-option.selected {
        border-color: #007bff;
        background: #f0f8ff;
    }

    .action-option.approve.selected {
        border-color: #28a745;
        background: #f0fff4;
    }

    .action-option.reject.selected {
        border-color: #dc3545;
        background: #fff5f5;
    }

    .action-option input[type="radio"] {
        position: absolute;
        opacity: 0;
    }

    .action-icon {
        font-size: 2rem;
        margin-bottom: 1rem;
        display: block;
    }

    .action-icon.approve {
        color: #28a745;
    }

    .action-icon.reject {
        color: #dc3545;
    }

    .action-label {
        font-weight: 600;
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .action-desc {
        font-size: 0.875rem;
        color: #6c757d;
        line-height: 1.4;
    }

    .approval-fields {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 2px solid #f8f9fa;
    }

    .field-group {
        margin-bottom: 1.5rem;
    }

    .field-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
        display: block;
    }

    .form-control, .form-select {
        border-radius: 8px;
        border: 2px solid #e9ecef;
        padding: 0.75rem 1rem;
        transition: all 0.3s ease;
    }

    .form-control:focus, .form-select:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .input-group-text {
        background: #f8f9fa;
        border: 2px solid #e9ecef;
        border-right: none;
        font-weight: 600;
        color: #495057;
    }

    .input-group .form-control {
        border-left: none;
    }

    .invalid-feedback {
        display: block;
        color: #dc3545;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    .form-text {
        color: #6c757d;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    .approval-preview {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 1rem;
        margin-top: 1rem;
        display: none;
    }

    .approval-preview.active {
        display: block;
    }

    .preview-title {
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 0.5rem;
    }

    .preview-content {
        color: #6c757d;
        font-size: 0.875rem;
    }

    .action-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin-top: 2rem;
    }

    .btn-action {
        padding: 0.75rem 2rem;
        border-radius: 8px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .btn-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    .warning-box {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .warning-title {
        font-weight: 600;
        color: #856404;
        margin-bottom: 0.5rem;
    }

    .warning-text {
        font-size: 0.875rem;
        color: #856404;
        margin: 0;
    }

    @media (max-width: 768px) {
        .approval-container {
            margin: 1rem;
            gap: 1rem;
        }

        .coach-header {
            flex-direction: column;
            text-align: center;
            gap: 1rem;
        }

        .coach-avatar {
            margin-right: 0;
        }

        .pending-badge {
            margin-left: 0;
        }

        .info-grid {
            grid-template-columns: 1fr;
        }

        .action-options {
            grid-template-columns: 1fr;
        }

        .action-buttons {
            flex-direction: column;
        }

        .btn-action {
            width: 100%;
            text-align: center;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="approval-container">
        <!-- 教练信息概览 -->
        <div class="coach-overview">
            <div class="coach-header">
                <div class="coach-avatar">
                    {% if coach.photo_url %}
                    <img src="{{ coach.photo_url }}" alt="{{ coach.real_name }}">
                    {% else %}
                    <i class="bi bi-person-circle"></i>
                    {% endif %}
                </div>
                <div class="coach-basic">
                    <h2 class="coach-name">{{ coach.real_name }}</h2>
                    <div class="coach-meta">
                        <span><i class="bi bi-telephone me-1"></i>{{ coach.phone }}</span>
                        {% if coach.email %}
                        <span><i class="bi bi-envelope me-1"></i>{{ coach.email }}</span>
                        {% endif %}
                        <span><i class="bi bi-calendar me-1"></i>注册于 {{ coach.created_at.strftime('%Y年%m月%d日') if coach.created_at else '未知' }}</span>
                    </div>
                </div>
                <div class="pending-badge">
                    <i class="bi bi-clock me-1"></i>待审核
                </div>
            </div>

            <div class="info-grid">
                <!-- 基本信息 -->
                <div class="info-section">
                    <h5 class="section-title">
                        <i class="bi bi-person"></i>基本信息
                    </h5>
                    {% if coach.gender or coach.age %}
                    <div class="info-item">
                        <span class="info-label">性别年龄：</span>
                        <span class="info-value">
                            {% if coach.gender %}{{ '男' if coach.gender == 'male' else '女' }}{% endif %}
                            {% if coach.age %}{% if coach.gender %}，{% endif %}{{ coach.age }}岁{% endif %}
                        </span>
                    </div>
                    {% endif %}
                    <div class="info-item">
                        <span class="info-label">联系方式：</span>
                        <span class="info-value">{{ coach.phone }}</span>
                    </div>
                    {% if coach.email %}
                    <div class="info-item">
                        <span class="info-label">邮箱地址：</span>
                        <span class="info-value">{{ coach.email }}</span>
                    </div>
                    {% endif %}
                </div>

                <!-- 申请信息 -->
                <div class="info-section">
                    <h5 class="section-title">
                        <i class="bi bi-file-text"></i>申请信息
                    </h5>
                    <div class="info-item">
                        <span class="info-label">申请时间：</span>
                        <span class="info-value">{{ coach.created_at.strftime('%Y年%m月%d日 %H:%M') if coach.created_at else '未知' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">当前状态：</span>
                        <span class="info-value">
                            <span class="badge bg-warning text-dark">待审核</span>
                        </span>
                    </div>
                    {% if coach.hourly_rate %}
                    <div class="info-item">
                        <span class="info-label">期望费用：</span>
                        <span class="info-value">{{ coach.hourly_rate }}元/小时</span>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- 个人简介和经验 -->
            {% if coach.bio or coach.experience %}
            <div class="info-grid">
                {% if coach.bio %}
                <div class="info-section">
                    <h5 class="section-title">
                        <i class="bi bi-person-lines-fill"></i>个人简介
                    </h5>
                    <div class="info-value" style="line-height: 1.6;">{{ coach.bio }}</div>
                </div>
                {% endif %}

                {% if coach.experience %}
                <div class="info-section">
                    <h5 class="section-title">
                        <i class="bi bi-award"></i>教学经验
                    </h5>
                    <div class="info-value" style="line-height: 1.6; white-space: pre-wrap;">{{ coach.experience }}</div>
                </div>
                {% endif %}
            </div>
            {% endif %}
        </div>

        <!-- 审核表单 -->
        <div class="approval-form">
            <h5 class="form-title">
                <i class="bi bi-check-circle"></i>审核决定
            </h5>

            <!-- 重要提醒 -->
            <div class="warning-box">
                <div class="warning-title">
                    <i class="bi bi-exclamation-triangle me-2"></i>审核提醒
                </div>
                <p class="warning-text">
                    审核决定一经提交将立即生效，通过后教练可开始工作，拒绝后需要重新申请。请仔细核实信息后做出决定。
                </p>
            </div>

            <form method="POST" novalidate>
                {{ form.hidden_tag() }}

                <!-- 审核动作选择 -->
                <div class="action-selector">
                    <label class="field-label">审核动作</label>
                    <div class="action-options">
                        <label class="action-option approve">
                            <input type="radio" name="action" value="approve" {% if form.action.data == 'approve' %}checked{% endif %}>
                            <i class="bi bi-check-circle action-icon approve"></i>
                            <div class="action-label">通过审核</div>
                            <div class="action-desc">该教练符合要求，批准其开始工作</div>
                        </label>

                        <label class="action-option reject">
                            <input type="radio" name="action" value="reject" {% if form.action.data == 'reject' %}checked{% endif %}>
                            <i class="bi bi-x-circle action-icon reject"></i>
                            <div class="action-label">拒绝申请</div>
                            <div class="action-desc">该教练不符合要求，拒绝其申请</div>
                        </label>
                    </div>
                    {% if form.action.errors %}
                        {% for error in form.action.errors %}
                        <div class="invalid-feedback">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                </div>

                <!-- 通过审核的配置字段 -->
                <div class="approval-fields" id="approvalFields" style="display: none;">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="field-group">
                                {{ form.campus_id.label(class="field-label") }}
                                {{ form.campus_id(class="form-select" + (" is-invalid" if form.campus_id.errors else "")) }}
                                {% if form.campus_id.errors %}
                                    {% for error in form.campus_id.errors %}
                                    <div class="invalid-feedback">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                                <div class="form-text">选择教练工作的校区</div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="field-group">
                                {{ form.coach_level.label(class="field-label") }}
                                {{ form.coach_level(class="form-select" + (" is-invalid" if form.coach_level.errors else "")) }}
                                {% if form.coach_level.errors %}
                                    {% for error in form.coach_level.errors %}
                                    <div class="invalid-feedback">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                                <div class="form-text">根据经验和能力设置级别</div>
                            </div>
                        </div>
                    </div>

                    <div class="field-group">
                        {{ form.hourly_rate.label(class="field-label") }}
                        <div class="input-group">
                            <span class="input-group-text">￥</span>
                            {{ form.hourly_rate(class="form-control" + (" is-invalid" if form.hourly_rate.errors else ""), placeholder="30.00") }}
                            <span class="input-group-text">元/小时</span>
                        </div>
                        {% if form.hourly_rate.errors %}
                            {% for error in form.hourly_rate.errors %}
                            <div class="invalid-feedback">{{ error }}</div>
                            {% endfor %}
                        {% endif %}
                        <div class="form-text">
                            设置教练的每小时费用，建议：初级 20-40元，中级 30-60元，高级 50-100元
                            {% if coach.hourly_rate %}
                            <br>教练申请时填写：{{ coach.hourly_rate }}元/小时
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- 审核备注 -->
                <div class="field-group">
                    {{ form.response_note.label(class="field-label") }}
                    {{ form.response_note(class="form-control" + (" is-invalid" if form.response_note.errors else ""), placeholder="请输入审核意见或备注信息") }}
                    {% if form.response_note.errors %}
                        {% for error in form.response_note.errors %}
                        <div class="invalid-feedback">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                    <div class="form-text">审核备注将发送给申请者，可选填</div>
                </div>

                <!-- 审核预览 -->
                <div class="approval-preview" id="approvalPreview">
                    <div class="preview-title">审核结果预览：</div>
                    <div class="preview-content" id="previewContent"></div>
                </div>

                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <a href="{{ url_for('coaches.detail', id=coach.id) }}" class="btn btn-secondary btn-action">
                        <i class="bi bi-arrow-left me-2"></i>取消审核
                    </a>

                    <a href="{{ url_for('coaches.list') }}" class="btn btn-outline-secondary btn-action">
                        <i class="bi bi-list me-2"></i>返回列表
                    </a>

                    <button type="submit" class="btn btn-primary btn-action">
                        <i class="bi bi-check-circle me-2"></i>提交审核
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    const actionRadios = document.querySelectorAll('input[name="action"]');
    const actionOptions = document.querySelectorAll('.action-option');
    const approvalFields = document.getElementById('approvalFields');
    const approvalPreview = document.getElementById('approvalPreview');
    const previewContent = document.getElementById('previewContent');

    // 审核动作选择处理
    function updateActionSelection() {
        const selectedAction = document.querySelector('input[name="action"]:checked')?.value;

        // 更新视觉状态
        actionOptions.forEach(option => {
            option.classList.remove('selected');
        });

        if (selectedAction) {
            const selectedOption = document.querySelector(`.action-option.${selectedAction}`);
            if (selectedOption) {
                selectedOption.classList.add('selected');
            }

            // 显示/隐藏通过审核的配置字段
            if (selectedAction === 'approve') {
                approvalFields.style.display = 'block';
            } else {
                approvalFields.style.display = 'none';
            }

            updatePreview();
        }
    }

    // 更新预览
    function updatePreview() {
        const action = document.querySelector('input[name="action"]:checked')?.value;
        const campusSelect = document.querySelector('select[name="campus_id"]');
        const levelSelect = document.querySelector('select[name="coach_level"]');
        const rateInput = document.querySelector('input[name="hourly_rate"]');
        const noteInput = document.querySelector('textarea[name="response_note"]');

        if (!action) {
            approvalPreview.classList.remove('active');
            return;
        }

        let preview = '';

        if (action === 'approve') {
            preview = `审核通过 {{ coach.real_name }} 的教练申请`;

            if (campusSelect && campusSelect.value) {
                const campusName = campusSelect.options[campusSelect.selectedIndex].text;
                preview += `，分配到${campusName}`;
            }

            if (levelSelect && levelSelect.value) {
                const levelName = levelSelect.options[levelSelect.selectedIndex].text;
                preview += `，级别设为${levelName}`;
            }

            if (rateInput && rateInput.value) {
                preview += `，费用为${rateInput.value}元/小时`;
            }
        } else if (action === 'reject') {
            preview = `拒绝 {{ coach.real_name }} 的教练申请`;
        }

        if (noteInput && noteInput.value.trim()) {
            preview += `。备注：${noteInput.value.trim()}`;
        } else {
            preview += '。';
        }

        previewContent.textContent = preview;
        approvalPreview.classList.add('active');
    }

    // 绑定事件
    actionOptions.forEach(option => {
        option.addEventListener('click', function() {
            const radio = this.querySelector('input[type="radio"]');
            if (radio) {
                radio.checked = true;
                updateActionSelection();
            }
        });
    });

    actionRadios.forEach(radio => {
        radio.addEventListener('change', updateActionSelection);
    });

    // 监听表单字段变化以更新预览
    const previewFields = [
        'select[name="campus_id"]',
        'select[name="coach_level"]',
        'input[name="hourly_rate"]',
        'textarea[name="response_note"]'
    ];

    previewFields.forEach(selector => {
        const field = document.querySelector(selector);
        if (field) {
            field.addEventListener('input', updatePreview);
            field.addEventListener('change', updatePreview);
        }
    });

    // 表单提交前验证
    form.addEventListener('submit', function(e) {
        const action = document.querySelector('input[name="action"]:checked')?.value;

        if (!action) {
            alert('请选择审核动作');
            e.preventDefault();
            return false;
        }

        if (action === 'approve') {
            const campusId = document.querySelector('select[name="campus_id"]').value;
            const coachLevel = document.querySelector('select[name="coach_level"]').value;
            const hourlyRate = document.querySelector('input[name="hourly_rate"]').value;

            if (!campusId) {
                alert('通过审核时必须选择分配校区');
                document.querySelector('select[name="campus_id"]').focus();
                e.preventDefault();
                return false;
            }

            if (!coachLevel) {
                alert('通过审核时必须设置教练级别');
                document.querySelector('select[name="coach_level"]').focus();
                e.preventDefault();
                return false;
            }

            if (!hourlyRate || parseFloat(hourlyRate) <= 0) {
                alert('通过审核时必须设置有效的每小时费用');
                document.querySelector('input[name="hourly_rate"]').focus();
                e.preventDefault();
                return false;
            }
        }

        const actionText = action === 'approve' ? '通过' : '拒绝';
        if (!confirm(`确定要${actionText}教练 {{ coach.real_name }} 的申请吗？\n\n此操作将立即生效且不可撤销。`)) {
            e.preventDefault();
            return false;
        }

        // 防止重复提交
        const submitBtn = document.querySelector('button[type="submit"]');
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>处理中...';

        // 5秒后重新启用按钮（防止网络问题）
        setTimeout(() => {
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="bi bi-check-circle me-2"></i>提交审核';
        }, 5000);
    });

    // 级别变化时自动建议费用
    const levelSelect = document.querySelector('select[name="coach_level"]');
    const rateInput = document.querySelector('input[name="hourly_rate"]');

    if (levelSelect && rateInput) {
        levelSelect.addEventListener('change', function() {
            if (!rateInput.value) {
                const suggestedRates = {
                    'junior': '30',
                    'middle': '50',
                    'senior': '80'
                };

                const suggested = suggestedRates[this.value];
                if (suggested) {
                    rateInput.value = suggested;
                    updatePreview();
                }
            }
        });
    }

    // 初始化
    updateActionSelection();
});
</script>
{% endblock %}